import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { mixRoute } from '@/utils'

import GoodsStyle from '@style/home'
import { GroupGoodsItemStyle } from './style'
import { Toast } from 'antd-mobile'
import { store } from '@store'

const GroupGoodsItem = (props) => {
    const { car_size, car_type, gimg, pack_type, sprice, title, goodsname } = props
    return (
        <GroupGoodsItemStyle className="flex-row">
            <div className="goods-img">
                <img src={'https://res.lexiangpingou.cn/' + gimg} alt="" />
            </div>
            <div className="goods-info flex-column">
                <div className="top">
                    <div className="title double-text-hidden">
                        <span>拼货</span>
                        {goodsname}
                    </div>
                    <div className="option flex-row">
                        {car_type && <div className="box">
                            {car_type}
                        </div>}
                        {car_size && <div className="box">
                            {car_size}
                        </div>}
                        {pack_type && <div className="box">
                            {pack_type}
                        </div>}
                    </div>
                </div>

                <div className="price">
                    <span>￥</span>{sprice}
                </div>
            </div>
        </GroupGoodsItemStyle>
    );
}

const OrderGoodsItem = (props) => {
    const { marginStyle, goods } = props

    return (
        <>
            <GoodsStyle>
                <div className="goods-container" style={marginStyle ? marginStyle : { margin: "0 0" }}  >
                    <div className="goods flex-row">
                        <div className="goods-left">
                            <img src={'https://res.lexiangpingou.cn/' + goods.gimg} alt=""></img>
                        </div>
                        <div className="goods-center">
                        </div>
                        <div className="goods-right flex-column">
                            <div className="goods-title">
                                <span>
                                    {/* <span
                                        style={{
                                            background: '#CF292B',
                                            color: 'white',
                                            padding: '.07rem .11rem',
                                            borderRadius: '.15rem'
                                        }}
                                    >{goods.sell_mode}</span> */}
                                    {goods.name}
                                </span>
                            </div>
                            <div className="sale-type">
                                <div className="type-inner flex-row"><span>￥{goods.sprice}/{goods.unit}</span><span>X {goods.num}</span></div>
                            </div>
                            <div className="goods-info flex-row">
                                <div className="info-inner">
                                    <span>车型：{goods.car_type} ({goods.car_size}) </span>
                                    <span
                                        style={{
                                            marginLeft: '.39rem'
                                        }}
                                    >{goods.title}</span>

                                    {/* {goods.fee && <span> 运费：￥{goods.fee} </span>}  */}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </GoodsStyle>
        </>
    );
}


const HomeGoodsItemHOC = (props) => {

    const history = useHistory()
    const [modal, setModal] = useState(false)
    const { marginStyle, MinGoodsDetail, gimg, id, name, oprice, sprice, ctype, unit } = props

    useEffect(() => {

    }, [modal])

    return (
        <>
            { modal === true && <MinGoodsDetail modal={modal} popupOnOff={e => { popupOnOff() }} id={id} />}

            <GoodsStyle >
                <div className="goods-container" style={marginStyle ? marginStyle : { margin: "0 0" }} onClick={e => {
                    mixRoute(history, `/goodsdetail/${id}`)
                }}>
                    <div className="goods flex-row">
                        <div className="goods-left">
                            <img src={formartImgUrl(gimg)} alt=""></img>
                        </div>
                        <div className="goods-center">
                        </div>
                        <div className="goods-right flex-column" onClick={e => { console.log('right 被点击') }}>
                            <div className="goods-title">
                                <span>
                                    <span
                                        style={{
                                            background: '#CF292B',
                                            color: 'white',
                                            padding: '.07rem .11rem',
                                            borderRadius: '.15rem'
                                        }}
                                    >{ctype === "1" ? '大宗' : '拼车'}</span>  {name}
                                </span>
                            </div>
                            <div className="sale-type">
                                {/* 起发单位规格 */}
                                {/* {item.min_num}件起发 */}
                            </div>
                            <div className="goods-info flex-row">
                                <div>
                                    <div className="nt-price">售价：￥{oprice}</div>
                                    <div className="real-price"> <span> ￥</span> {sprice}/{unit} </div>
                                </div>
                                <div className="caigou" onClick={e => { popupOnOff(e) }}>
                                    <div className="">
                                        <span>我要采购</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </GoodsStyle>
        </>
    );

    function formartImgUrl(url) {
        return 'https://res.lexiangpingou.cn/' + url
    }

    function popupOnOff(e) {
        //  采购弹窗
        if (e) {
            //  事件穿透
            e.stopPropagation()
        }
        setModal(!modal)
    }
}

const OtherGoodsItem = (props) => {

    let history = useHistory();
    const { marginStyle } = props
    return (
        <>
            <GoodsStyle>
                <div className="goods-container" style={marginStyle ? marginStyle : { margin: "0 0" }} onClick={() => {
                    mixRoute(history, '/orderdetail')
                }}>
                    <div className="goods flex-row">
                        <div className="goods-left">
                            <img src="https://res.lexiangpingou.cn/images/826/2020/09/mPLtLsJuJi8ZJsOGmmIStJzs60IG6j.png" alt=""></img>
                        </div>
                        <div className="goods-center">
                        </div>
                        <div className="goods-right flex-column">
                            <div className="goods-title">
                                <span>
                                    新鲜荔枝 当季鲜荔枝 甜蜜桂味黑叶妃子笑热现摘现发 妃子笑大...
                                </span>
                            </div>
                            <div className="sale-type">
                                <div className="type-inner flex-row"><span>￥ 4.9</span><span>X 1</span></div>
                            </div>
                            <div className="goods-info flex-row">
                                <div className="info-inner"> <span>规格：红色</span> <span> 运费：￥0.00</span> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </GoodsStyle>
        </>
    );
}

const FavoritesGoodsItem = (props) => {
    let history = useHistory();
    const { marginStyle, goods } = props
    return (
        <>
            <GoodsStyle>
                <div className="goods-container" style={marginStyle ? marginStyle : { margin: "0 0" }} onClick={e => { handelPush() }}>
                    <div className="goods flex-row">
                        <div className="goods-left">
                            <img src={`https://res.lexiangpingou.cn/${goods.gimg}`} alt=""></img>
                        </div>
                        <div className="goods-center">
                        </div>
                        <div className="goods-right flex-column">
                            <div className="goods-title">
                                <span>
                                    <span
                                        style={{
                                            background: '#CF292B',
                                            color: 'white',
                                            padding: '.07rem .11rem',
                                            borderRadius: '.15rem'
                                        }}
                                    >{goods.ctype === "1" ? '大宗' : '拼车'}</span>
                                    {goods.name}
                                </span>
                            </div>
                            <div className="sale-type flex-row">
                                {/* 商品销售类型 */}
                                <div className="difference-price" style={{ backgroundColor: '#FFE4D5', color: '#FF762E', fontSize: '.29rem' }}>
                                    {/* 降价涨价 */}
                                        比收藏时降价{(goods.join_price - goods.sprice).toFixed(2)} 元
                                    </div>
                                <div className="type">

                                </div>
                            </div>
                            <div className="goods-info flex-row">
                                <div>
                                    <div className="nt-price">售价：￥{goods.oprice}</div>
                                    <div className="real-price">￥ {goods.sprice}/{goods.unit}</div>
                                </div>
                                <div>

                                    {
                                        (goods.valid_time === '已失效') &&
                                        <span
                                            style={{
                                                fontSize: '.29rem',
                                                color: "white",
                                                backgroundColor: '#CECECE',
                                                borderRadius: '.15rem',
                                                padding: '.13rem .27rem'
                                            }}
                                        >
                                            {goods.valid_time}

                                        </span>
                                    }

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </GoodsStyle>
        </>
    );

    function handelPush() {
        if (goods.valid_time === '已失效') {
            Toast.info('商品已过期', 1)
        } else {
            mixRoute(history, `/goodsDetail/${goods.gid}`)
        }
    }
}




export {
    HomeGoodsItemHOC,
    OtherGoodsItem,
    FavoritesGoodsItem,
    OrderGoodsItem,
    GroupGoodsItem
};
